<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生信息管理</title>
  <script src="../js/vue.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
  <script src="../element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
  <b style="color: red; font-size: 20px;">学生信息列表</b>
  <!--    <div style="float: right;">-->
  <!--        <el-button type="primary" @click="showAddStudent">添加学生账户</el-button>-->
  <!--    </div>-->
  <div>
    <el-select v-model="faculty.facultyName" placeholder="请选择学院" @change="facultyChange">
      <el-option
              v-for="item in faculty"
              :key="item.facultyId"
              :label="item.facultyName"
              :value="item.facultyId">
      </el-option>
    </el-select>
    <el-select v-model="classes.className" placeholder="请选择班级" @change="classesChange">
      <el-option

              v-for="item in classes"
              :key="item.classId"
              :label="item.className"
              :value="item.classId">
      </el-option>
    </el-select>
  </div>
  <!--
      :data="tableData" 关联vue中的data中的tableData，后台将数据赋值给tableData，然后显示到这里
  -->
  <el-table :data="tableData">
    <el-table-column align="center" type=index label="序号" prop="user.userId" width="100px"></el-table-column>
    <el-table-column align="center" prop="user.userNumber" label="学号"></el-table-column>
    <el-table-column align="center" prop="classes.className" label="班级"></el-table-column>
    <el-table-column align="center" prop="name" label="姓名"></el-table-column>
    <el-table-column align="center" prop="sex" label="性别"></el-table-column>
    <el-table-column align="center" prop="identification" label="身份证号码" width="200"></el-table-column>
    <el-table-column align="center" prop="phone" label="联系方式"></el-table-column>
    <el-table-column align="center" prop="registe" label="是否注册"></el-table-column>
  </el-table>

  <!--分页-->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[3,5,8]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
  </el-pagination>

</div>
</body>
<script>
  new Vue({
    el: "#div",
    data: {
      tableData: [],//表格数据
      faculty: [],
      classes: [],
      pagination: {
        currentPage: 1, //当前页
        pageSize: 8,    //每页显示条数
        total: 0        //总条数
      },
      otherInfo: {
        facultyId: 1,
        classId: 0
      },
    },
    methods: {
      //改变每页条数时执行的函数
      handleSizeChange(pageSize) {
        //修改分页查询的参数
        this.pagination.pageSize = pageSize;
        //重新执行查询
        this.selectByPage();
      },
      //改变页码时执行的函数
      handleCurrentChange(pageNum) {
        //修改分页查询的参数
        this.pagination.currentPage = pageNum;
        //重新执行查询
        this.selectByPage();
      },
      //改变学院时
      facultyChange(facultyId) {
        this.otherInfo.facultyId = facultyId;
        this.selectClasses();
        this.selectByPage();
      },
      //改变班级时
      classesChange(classesId) {
        this.otherInfo.classId = classesId;
        this.selectByPage();
      },
      //重新查找学院之下所有的班级
      selectClasses() {
        let param = "action=showClasses&facultyId=" + this.otherInfo.facultyId;
        console.log(param);
        axios.post("/EpidemicControlSystem_war_exploded/FacultyServlet", param)
                .then(res => {
                  console.log(res.data);
                  this.classes = res.data
                });
      },
      //分页查询功能
      selectByPage() {
        //向后台发送请求
        let param = "action=showStudentInfo&curPage=" + this.pagination.currentPage +
                "&pageSize=" + this.pagination.pageSize + "&facultyId=" + this.otherInfo.facultyId +
                "&classId=" + this.otherInfo.classId;
        console.log(param);
        axios.post("/EpidemicControlSystem_war_exploded/UserServlet", param)
                .then(response => {
                  console.log(response.data);
                  //将查询出的数据赋值给tableData
                  this.tableData = null;
                  this.tableData = response.data.userInfos;
                  console.log(this.tableData);
                  //总条数
                  this.pagination.total = response.data.count;

                });
      }
    },
    created() {
      axios.post("/EpidemicControlSystem_war_exploded/FacultyServlet",
              "action=showFaculty")
              .then(res => {
                this.faculty = res.data;
                console.log(this.faculty)
              });
      //调用分页查询功能
      this.selectByPage();
    }
  });
</script>
</html>